<template>
    <div class="log-upload-container">
        <PageHeader title="日志上传" />
        
        <div class="form-section">
            <div class="form-group">
                <label class="form-label">
                    <span class="required">*</span>上报类型
                </label>
                <van-radio-group v-model="form.logType" direction="horizontal">
                    <van-radio name="1">日报</van-radio>
                    <van-radio name="2">周报</van-radio>
                    <van-radio name="3">月报</van-radio>
                </van-radio-group>
            </div>

            <div class="form-group">
                <label class="form-label">
                    <span class="required">*</span>上报日期
                </label>
                <van-field
                    v-model="form.displayDate"
                    readonly
                    clickable
                    name="date"
                    :placeholder="'请选择上报日期'"
                    @click="showDatePicker = true"
                />
                <van-popup v-model:show="showDatePicker" position="bottom" round>
                    <van-date-picker
                        v-model="form.currentDate"
                        type="date"
                        title="选择日期"
                        :min-date="minDate"
                        :max-date="maxDate"
                        @confirm="onDateConfirm"
                        @cancel="showDatePicker = false"
                    />
                </van-popup>
            </div>

            <div class="form-group">
                <label class="form-label">
                    <span class="required">*</span>{{ summaryLabel }}
                </label>
                <textarea 
                    v-model="form.weeklySummary"
                    :placeholder="`请输入${summaryLabel}`"
                    class="form-textarea"
                    rows="4"
                ></textarea>
            </div>

            <div class="form-group">
                <label class="form-label">
                    <span class="required">*</span>{{ planLabel }}
                </label>
                <textarea 
                    v-model="form.nextWeekPlan"
                    :placeholder="`请输入${planLabel}`"
                    class="form-textarea"
                    rows="4"
                ></textarea>
            </div>

            <div class="form-group">
                <label class="form-label">反馈</label>
                <textarea 
                    v-model="form.feedback"
                    placeholder="请输入反馈内容"
                    class="form-textarea"
                    rows="4"
                ></textarea>
            </div>

            <div class="form-group">
                <label class="form-label">
                    <span class="required">*</span>自我评价
                </label>
                <div class="rate-container">
                    <van-rate
                        v-model="form.selfEvaluation"
                        :size="25"
                        color="#1E9FFF"
                        void-icon="star"
                        void-color="#eee"
                        :count="4"
                        :allow-half="false"
                        :readonly="false"
                    />
                    <div class="rate-text">
                        {{ getRateText(form.selfEvaluation) }}
                    </div>
                </div>
            </div>

            <div class="upload-section">
                <label class="form-label">添加附件</label>
                <div class="upload-container">
                    <div class="upload-group">
                        <ImageUpload 
                            v-model="form.imageList"
                            label="上传图片"
                            placeholder="点击上传图片"
                            :multiple="true"
                            :upload-type="'zhjy'"
                            :maxCount="1"
                            :maxSize="5 * 1024 * 1024"
                            @error="handleError"
                        />
                    </div>

                    <div class="upload-group">
                        <UpLoadFile 
                            v-model="form.fileList"
                            label="上传文件"
                            :upload-type="'zhjy'"
                            placeholder="点击上传文件"
                            :multiple="true"
                            :maxCount="2"
                            :maxSize="10 * 1024 * 1024"
                            @error="handleError"
                        />
                    </div>
                </div>
            </div>

            <button 
                @click="submitLog" 
                class="submit-btn"
                :disabled="!canSubmit"
            >
                提交日志
            </button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { 
    Icon as VanIcon, 
    RadioGroup as VanRadioGroup, 
    Radio as VanRadio, 
    Field as VanField, 
    Popup as VanPopup, 
    DatePicker as VanDatePicker, 
    Rate as VanRate,
    showToast 
} from 'vant';
import PageHeader from '@/Pages/compontents/PageHeader.vue';
import UpLoadFile from '@/Pages/compontents/UpLoadFile.vue';
import ImageUpload from '@/Pages/compontents/ImageUpload.vue';
import apiUrls from '@/config/apiUrls'; 
import request from '@/utils/request';


const showDatePicker = ref(false);
const minDate = new Date(2000, 0, 1);
const maxDate = new Date(2030, 11, 31);
// 表单数据对象
const form = reactive({
    logType: '3',
    currentDate: [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()],
    weeklySummary: '',
    nextWeekPlan: '',
    feedback: '',
    selfEvaluation: 3, // 默认值为3（良好）
    fileList: [],
    imageList: [],
    displayDate: computed(() => {
        if (!form.currentDate || form.currentDate.length !== 3) return '';
        const [year, month, day] = form.currentDate;
        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    })
});

const onDateConfirm = (date) => {
    form.currentDate = date['selectedValues'];
    showDatePicker.value = false;
};

const canSubmit = computed(() => {
    return form.displayDate && 
           form.weeklySummary.trim() && 
           form.nextWeekPlan.trim() && 
           typeof form.selfEvaluation === 'number' && 
           form.selfEvaluation > 0;
});

const submitLog = async () => {
    if (!canSubmit.value) {
        showToast('请填写完整信息');
        return;
    }
    try {
        console.log('提交的数据:', form);
        const response = await request.post(apiUrls.zhjy.saveZhjyLog, form);
        console.log(response);
        
        // TODO: 实现提交逻辑
        showToast('提交成功');
    } catch (error) {
        console.error('提交失败:', error);
        showToast('提交失败，请重试');
    }
};

const handleError = (error) => {
    console.error('上传错误:', error);
    showToast(error.message || '上传失败，请重试');
};

const getRateText = (value) => {
    switch(value) {
        case 1:
            return '尚需努力';
        case 2:
            return '一般';
        case 3:
            return '良好';
        case 4:
            return '优秀';
        default:
            return '';
    }
};

// 根据报告类型动态显示标签
const summaryLabel = computed(() => {
    switch(form.logType) {
        case '1':
            return '今日总结';
        case '2':
            return '本周总结';
        case '3':
            return '本月总结';
        default:
            return '本周总结';
    }
});

const planLabel = computed(() => {
    switch(form.logType) {
        case '1':
            return '明日计划';
        case '2':
            return '下周计划';
        case '3':
            return '下月计划';
        default:
            return '下周计划';
    }
});
</script>

<style scoped>
.log-upload-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.form-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.required {
    color: #ff4d4f;
    margin-right: 4px;
}

.form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-textarea:focus {
    border-color: #1E9FFF;
    outline: none;
}

.rate-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}

.rate-text {
    color: #666;
    font-size: 14px;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: #1E9FFF;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover:not(:disabled) {
    background: #1890ff;
}

.submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

:deep(.van-radio-group) {
    display: flex;
    gap: 20px;
}

:deep(.van-radio) {
    margin-right: 0;
}

.upload-section {
    margin-bottom: 20px;
}

.upload-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.upload-group {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    min-height: 120px;
}

:deep(.van-uploader) {
    width: 100%;
}

:deep(.van-uploader__wrapper) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 100px;
}

:deep(.van-uploader__preview) {
    margin: 0;
    width: 100px;
    height: 100px;
}

:deep(.van-uploader__preview-image) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

:deep(.van-uploader__upload) {
    margin: 0;
    width: 100px;
    height: 100px;
}

:deep(.van-uploader__input-wrapper) {
    width: 100%;
    height: 100%;
    border: 1px dashed #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

:deep(.van-uploader__input-wrapper:hover) {
    border-color: #1E9FFF;
}

:deep(.van-uploader__upload-icon) {
    color: #999;
    font-size: 24px;
}

:deep(.van-uploader__upload-text) {
    color: #666;
    font-size: 12px;
    margin-top: 4px;
}
</style>
